![]() |
Программирование для Internet |
||
|
Мы уже встречались с объектами предопределенными в браузере. Это объекты document и form. На самом деле браузер предоставляет нам гораздо больше объектов. Сегодня речь пойдет о том для чего они нужны и как ими пользоваться.
Объекты браузера представляют из себя некую иерархическую структуру. Во главе ее стоит объект window. Система создает екземпляр этого объекта window, которым мы можем пользоваться. Все остальные объекты браузера (вернее, их экземпляры) являются свойсвами экземпляра window (или свойствами его свойств).
Все объекты навигатора создаются самим браузером и нам нет нужны создавать их.
Все эти объекты имеют различные наборы свойств и методов в зависимости от браузера. Мы будем рассматривать только общие свойства и методы кроме тех случаев, когда это оговорено особо.
Итак, главным в иерархии является объект window. Его свойствами являются такие вещи, как document, navigator и т.д. Приведем схему иерархии объектов браузера, а, затем, рассмотрим главные из них.
Вы, наверное, заметили, что названия этих объектов начинаются с маленькой буквы. Дело в том, что на самом деле, здесь мы исеем дело с экземплярами объектов, а не с самими объектами. Однако, эти экземпляры создаются не нами и мы не будем заострять на этом внимание. Впредь мы будем говорить просто объект document, объект window и т.д. Помните, пожалуйста, что, строго говоря, они, на самом деле, экземпляры соответствующих объектов.
При рассмотрении всех объектов, мы будем сначала перечислять их основные свойства, методы и наиболее важные события на которые они могут реагировать. Более полная таблица событий приведена отдельно. Там они прокоментированы и указано для каких объектов они возникают. Затем, будем обсуждать отдельные свойства и методы и рассматривать примеры.
На самом деле у этих объектов гораздо больше свойств и методов. Те, кому они интересны, могут посмотреть документацию или воспользоваться исследователем объектов. Со многими из опущенных сегодня свойств мы еще познакомимся в теме DHTML.
name | Имя окна. Указывается при создании и служит для доступа к окну. |
status | Строка, которая показываетя снизу экрана. Этому свойству можно присваивать различные значение и пользователь их увидит. |
defaultStatus | Значение по умолчанию для свойства status. |
location | URL страницы загруженной в окне. Если присвоить этому свойству другое значение, начнется немедленная загрузка другой страницы. |
document | Объект, соответсвующий загруженному документу (см. ниже). |
navigator | Объект, описывающий браузер в который загружена страница. Если Вашей странице не все рано куда ее загрузили - это то самое место, где она может это узнать (см. ниже). |
history | Объект, содержащий историю сеанса работы пользователя, т.е. URL страниц, на которых он уже был (см. ниже). |
self | Ссылка на сам данный объект window. Иногда бывает нужно. |
parent | Ссылка на родительское окно. |
top | Ссылка на самое главное окно - родитель для всех окон. |
closed | Истина, если окно закрыто. Применяется для проверки существует ли еще созданное Вами окно, или пользователь закрыл его. |
alert | Показывает на экране диалоговое окно с текстом, заданным параметром. |
back | Эффект тот же, как если бы пользователь нажал кнопку Back браузера. |
blur | Удаляет фокус (делае неактивным) с элемента указанного в параметре |
captureEvents | Заставляет окно перехватывать все события указанного типа. |
clearInterval | Отменяет действие метода setInterval |
clearTimeout | Отменяет действие метода setTimeout |
close | Закрывает указанное окно |
confirm | Как и alert, показывает на экране диалоговое окно с текстом, заданным параметром. Однако, при этом в диалоговом окне появляются кнопки "Okay" и "Cancel". Предназначен для того, чтобы задавать вопросы пользователю. |
focus | Делает указанный элемент активным (устанавливает в него курсор и т.п.) |
forward | Эффект тот же, как если бы пользователь нажал кнопку Forward браузера. |
open | Открывает новое окно браузера |
prompt | Показывает на экране диалоговое окно в которое пользователь может ввести строку информации и нажать Ok |
setInterval | Устанавливает интервал времени, через который будет исполняться указанный программный код. Код будет выполняться через равные промежутки до тех пор, пока интервал не будет отменен с помощью clearInterval |
setTimeout | Устанавливает интервал времени, через который исполнится указанный программный код. Код будет выполн один раз. Можно предотвратить исполнени кода, если до истечения интервала вызвать clearTimeout |
onfocus | Вызывается, когда окно становится активным. |
onblur | Вызывается, когда окно перестает быть активным. |
onresize | Вызывается, когда пользователь изменил размеры окна |
onscroll | Вызывается, когда пользователь произвел скроллинг документа |
onload | Вызывается, когда окно загрузилось |
onunload | Вызывается, когда пользователь собрался загрузить другое окно |
onerror | Вызывается, когда возникла ошибка при обработке программы на JavaScript и при некоторых других ошибках |
document.write("Hello");
есть тоже самое, что и
window.document.write("Hello");
Большинство из методов объекта window мы рассмотрим позднее вместе с другими элементами, такими как элементы формы и т.д. Сейчас же мы остановимся на setTimeout/clearTimeout и setInterval/clearInterval.
setTimeout("<выражение>", msec)
Вызов setTimeout не приостанавливает выполнения программы и не заставляет систему переходить в ожидание на указанное время. Программа продолжает выполняться, просто указанный код будет выполнен по истечении заданного времени.
setTimeout возвращает число - идентификатор установленного интервала. Если Вам нужно отменить выполнение кода до того, как истек интервал, следует вызвать clearTimeout и передать ему, в качестве аргумента, идентификатор, возвращенный setTimeout.
onload = "alert('Рад Вас видеть на моей странице!')"; onunload = "alert('До новых встреч!')";
Окно с таким кодом будет приветствовать пользователя, загрузившего его и прощаться с ним, когда он покидает Ваш документ.
defaultStatus = "Страница Ниф-нифа и Наф-нафа";
Когда курсор не будет указывать на ссылку, в поле статуса будет отображаться казанный текст.
location = "http://up.botik.ru/";
Как только система "увидит" эту команду, немедленно начнется загрузка в текущее окно документа http://up.botik.ru/.
<SCRIPT LANGUAGE="JavaScript"> function hour() { alert('Час прошел!'); } </SCRIPT> <BODY onload="setTimeout('hour()',3600000);">
Через час после зугрузки этой страницы, пользователь получит сообщение "Час прошел!".
<SCRIPT LANGUAGE="JavaScript"> function hour() { alert('Час прошел!'); setTimeout('hour()',3600000); } </SCRIPT> <BODY onload="setTimeout('hour()',3600000);">
Каждый час пользователь будет получать сообщение "Час прошел!". Обратите внимание на рекурсию в hour().
<FORM> <INPUT TYPE=BUTTON VALUE="Назад" onclick="back()"> </FORM>
Нажав на кнопку, Вы вернетесь на страницу, которую Вы смотрели до этой. Попробуйте, если хотите.
И последний, чуть более сложный пример.
<SCRIPT LANGUAGE="JavaScript"> var counter = 0; function second() { counter++; } setInterval('second()',1000); function ask_time() { alert("Вы здесь уже "+counter+" сек."); } </SCRIPT> ... <INPUT TYPE=BUTTON VALUE="Время" onclick="ask_time()">
Всякий раз, когда пользователь нажмет кнопку, ему будут ссобщать сколько секунд он уже смотрит эту страницу. Разумеется, при следующем нажатии, время изменится. Попробуйте:
Очень важный метод open, который служит для открытия новых окон, как и массив frames, мы рассмотрим на следующем занятии.
Объект history достаточно прост. Ознакомьтесь с ним самостоятельно по документации. Что касается объекта location, то у него довольно много свойств и всего два метода: reload и replace.
Вызывает перезагрузку текущего окна. У этого метода есть один параметр. Если установить его в true, то документ обязательно загружается с сервера. Если же он false - браузер сам принимает решение взять документ из кэша или перезагрузить с сервера.
Вызывает загрузку в браузер документа, указанного в качестве параметра.
location.replace("http://www.botik.ru/");
Это очень важный метод для создания так-называемых буферных страниц. Например, если Вы сейчас зайдете на страницу университета по адресу http://up.botik.ru/, то вы не сможете вернуться назад при помощи простого надатия клавиши Back (по крайней мере в тот момент, когда пишется этот текст, это так). Почему? Дело в том, что http://up.botik.ru/ - буферная страница. Она не показывается сама по себе, а перенаправляет Вас на другую страницу - http://u-pereslavl.botik.ru/UP/welcome.html. Теперь, если вы с нее попытаетесь вернуться назад, Вы снова попадете на буферную страницу http://up.botik.ru/ и та, опять перенаправит Вас на http://u-pereslavl.botik.ru/UP/welcome.html. Таким образом, кнопка Back как бы не работает.
Важная особенность метода replace состоит в том, что он перенаправляет браузер на другую страницу БЕЗ запоминания текущей страницы в списке history. Т.е., если на буферной странице использовать не location="....", а location.replace("...."), то буфеная страница не будет запоминаться браузером и кнопка Back будет возвращать пользователя не на буферную страницу, а на ту, что была до нее.
Массив frames содержит информацию обо всех фреймах определенных на данной странице (если таковые имеются). Каждый элемент массива frames есть не что иное, как экземпляр объекта Frame.
Объект Frame - потомок объекта Window. Значит, фреймы обладают всеми свойствами и методами окон (см.выше). Сейчас мы ограничимся этим заявлением и оставим рассмотрение фреймов и окон до следующей лекции, которая специально посвящена этим вопросам.
Этот объект служит для определения в каком именно браузере выполняется Ваша программа. Поскольку, некоторые вещи в JavaScript (особенно в структуре системных объектов и в DHTML) очень сильно зависят от браузера, часто бывает просто необходимо точно знать браузер и его версию.
Самы часто используемые свойства этого объекта - appName и appVersion. Вряд-ли они нуждаются в дополнительных пояснениях. Их названия достаточно красноречивы. Эти свойства присутствуют во всех браузерах. Набор же остальных свойств может различаться. Приведем полный список свойств для Вашего браузера:
Рассмотрим пример. Допустим Ваша программа обязательно требует браузера MSIE начиная с версии 4.0 или Netscape с версии 4.04. При этом Вам есть разница имеете ли Вы дело с MSIE или Netscape.
Напишем функцию, которая возвращает 1 для MSIE, 2 - для Netscape и 0 - для других браузеров или для более ранних версий MSIE и Netscape. Когда функция возвращает 0, она, заодно, должна выдавать сообщение пользователю.
Такая функция могла бы выглядеть, например, так:
Попробуете выполнить ее на Вашем браузере?
Теперь у Вас не должно быть проблем с определением браузера, в который загружена Ваша программа.
Объект document и его свойства - это то, с чем приходится иметь дело наиболее часто.
В тексте на HTML, этот объект предсатвлен тэгом BODY. Именно в этом тэге задаются значения его свойств и обработчики событий. Однако, нам никто не мешает делать это и из JavaScript программы. Например:
document.onmousedown=_myMouseDown;
Вообще, HTML документ состит из двух частей - заголовка (тэг HEAD) и собственно документа - (тэг BODY). Все остальные тэги располагаются внутри тэга BODY (между <BODY> и </BODY>). Поэтому, Вас не должно удивлять, что все остальные элементы документа, такие как изображения, ссылки и т.д. являются лишь свойствами объекта document.
Рассмотрим основные обработчики событий, связанные с объектом document.
onBlur, onFocus, onLoad, onUnload | Задаются в тэге BODY, но, на самом деле, являются событиями объекта window (см. выше) |
onMouseDown | Пользователь нажал кнопку мыши |
onMouseUp | Пользователь отпустил кнопку мыши |
onClick | Пользователь "щелкнул" кнопку мыши. Одно такое событие соответсвует паре событий MouseUp/MouseDown |
onDblClick | Пользователь дважды, с коротким интервалом, "щелкнул" кнопку мыши. |
onKeyDown | Пользователь нажал клавишу |
onKeyUp | Пользователь отпустил клавишу |
onKeyPress | Нажата клавиша. Одно такое событие соответсвует паре KeyUp/KeyDown |
Смысл этих событий достаточно очевиден. Примеры же мы рассмотрим чуть позже.
Что касается методов объекта document, то два из них - write и writeln - нам уже хорошо знакомы.
Другие два - open и close - будут подробно, с примерами, рассматриваться в следующей лекции.
Еще четыре - captureEvents, releaseEvents, handleEvent, и routeEvent - характерны только для браузера Netscape Navigator и связаны со спецификой обработки событий в этом браузере. Мы рассмотрим эти методы позже в этой лекции - в специальном разделе, посвященном обработке событий.
Остался только один метод: getSelection. Этот метод возвращает текст, который в данный момент "выбран" (подсвечен мышью) в документе. К сожалению, этот метод не поддерживается MSIE.
fgColor | Строка - цвет текста документа. Соответствует параметру TEXT тэга BODY |
bgColor | Строка - цвет фона документа. Соответствует параметру BGCOLOR тэга BODY |
linkColor | Строка - цвет ссылок в документе. Соответствует параметру LINK тэга BODY |
vlinkColor | Строка - цвет ссылок, которые недавно посещались. Соответствует параметру VLINK тэга BODY |
alinkColor | Строка - цвет активных ссылок. Соответствует параметру ALINK тэга BODY |
images | Массив изображений, присутствующих в документе. Каждый элемент этого массива представляет из себя экземпляр объекта Image и соответствует тэгу IMG. |
links | Массив гиперссылок, присутствующих в документе. Каждый элемент этого массива представляет из себя экземпляр объекта Link и соответствует тэгу A. |
forms | Массив форм, присутствующих в документе. Каждый элемент этого массива представляет из себя экземпляр объекта Form и соответствует тэгу FORM. |
formName | Свойства formName, как такового, нет. Просто для каждой поименованной формы в документе (формы, у которой, в тэге FORM, указан параметр NAME) заводится специальное свойство с именем, совпадающим с именем формы. Именно это позволяло нам с Вами обращаться к формам, минуя массив forms. |
title | Заголовок документа |
URL | Полный адрес документа. В принципе есть еще свойство location - синоним URL, но пользоваться им не рекомендуется. Дело в том, что компания Netscape Communications объявила, что не будет впредь его включать в новые версии браузеров. |
referrer | URL документа с которого был загружен данный. Имеется в виду, что в том документе была ссылка на данный и по этой-то ссылке данный документ и был загружен. |
lastModified | Дата последней модификации данного документа. |
Объект document обладает еще рядом свойств (см. документацию), но мы поку не будем их рассматривать. Кроме того, у него очень много свойств зависящих от конкретного браузера. С некоторыми из них, мы еще столкнемся.
Пока же отметим, что свойства объекта document можно условно разбить на три категории: параметры тэга BODY; коллекции тэгов (images, forms, и т.д.); и, сосбственно, характеристики файла - документа.
Первая категория свойств допускает доступ как на чтение, так и на запись. Можно, например, поменять фон документа или цвет ссылок динамически (см. примеры ниже). Хотя, по правде говоря, не всегда. Напрмер, в Netscape можно изменить цвет фона, но нельзя - цвет текста. Вторая категория - только для чтения.
В приводимой ниже таблице, каждой кнопке соответсвует вызов написанной над кнопкой функции (через, знакомый нам, обработчик onClick). В правом же столбце, приведены комментарии.
Как уже было сказано, массив images содержит информацию обо всех изображениях заданных в документе тэгом IMG. Каждый элемент массива является экземплярам объекта Image. Доступ к конкретному элементу можно получить либо через его индекс в массиве, либо через имя изображения заданное в параметре NAME тэга IMG.
Например, если в документе имеется тэг:
<IMG NAME="firstPicture" SRC="pic1.gif">
и этот тэг является первым тэгом IMG в документе, то на него можно сослаться из программы несколькими способами:
var myImage = document.images[0]; или var myImage = document.images.["firstPicture"]; или var myImag e = document.images.firstPicture;
Не следует, без крайней нужды, пользоваться прямой индексацией (первый пример). Дело в том, что в этом случае Вам нужно точно знать порядковый номер нужного тэга в документе. Если же Вы, позднее, решите вставить еще одну картинку в начало документа, все Ваши индексы "поплывут".
Если Вы заглянете в документацию фирмы Netscape, то Вы обнаружите следующие обработчики событий для объекта Image.
onAbort | Загрузка картинки из сети прервана пользователем |
onError | Картинку не удалось загрузить из сети. Например, ее просто нет на сервере или произошел сбой соединения. Это событие можно использовать, для замены "проблемной" картинки на другую. |
onKeyDown, onKeyPress, onKeyUp | Это наши старые знакомые. Мы их уже встречали. |
onLoad | Картинка загрузилась и отобразилась на экране. Обратите внимание, это событие возникает и тогда, когда мы отображаем на экране ранее загруженную картинку. Это часто используется при анимации (см. пример ниже). |
Некоторое удивление может вызвать тот факт, что у объекта Image нет обработчика событий MouseOver и MouseOut. А как же обрабатывать "наезд" мышки?
В принципе, есть несколько способов, но в той же документации, специалисты фирмы Netscape советуют делать картинку гиперссылой и обрабатывать эти события не для картинки, а для ссылки.
Рассмотрим, например, такой код:
<A HREF="javascript:void(0)" onMouseOver="document.outform.txt.value='Наехали!!!'" onMouseOut="document.outform.txt.value=''" onFocus="blur()" ><IMG SRC="33.gif" BORDER=0></A> <P> <FORM NAME="outform"> <INPUT NAME="txt" SIZE=13> </FORM>
Ссылка HREF="javascript:void(0)" - это ссылка "в никуда". При нажатии на такую ссылку перехода не происходит. На следующей лекции мы будем расматривать такие ссылки более подробно. Сейчас же такой ссылкой можно просто пользоваться.
Обработчик onFocus="blur()" нужен для того, чтобы эта псевдоссылка никогда не получала фокуса ввода, иначе картинка будет обведена пунктирной линией - мне это не нравится. Метод blur() мы уже встречали при рассмотрении объекта window. Как и метод focus() - он присутствует у всех объектов - элементов документа.
Получается вот такая картинка:
У объекта Image достаточно много свойств (как всегда, Вы можете посмотреть документацию), но нас будут интересовать только три: width, height и src.
С первыми двумя все понятно по их названиям. Считайте, что они "только для чтения", впрочем, можете попробовать менять их из программы и смотреть, что получится в разных браузерах.
Свойство же src может быть изменено и это дает нам возможность заменять одну картинку на другую уже после загрузки документа. Например, картинка, приведенная ниже, вставлена в документ с помощью тэга:
<IMG NAME="card" SRC="21.gif">
Кнопка - вставлена с помощью вот такого тэга (обратите внимание на onclick):
<INPUT TYPE=BUTTON VALUE="Заменить" ONCLICK="document.images.card.src='38.gif'">
Попробуйте ее нажать.
Таким образом, мы с Вами теперь знаем, как заменить одну картинку на другую в ответ на некоторое событие (в данном примере - нажатие кнопки).
На самом деле, такой метод замены мало подходит для анимации. Дело в том, файл с изображением начинает загружаться из сети только тогда, когда его URL присвоен свойству SRC. Поэтому, если у Вас медленная связь, то Вы довольно долго ждали, пока картинка заменится.
Выход - попытаться загрузить картинку заранее, чтобы, когда она реально понадобитс, она уже была в памяти компьютера пользователя (на худой конец, на его локальном диске). Это можно сделать с помощью такого простого приема:
var pic1 = new Image(); pic1.src = "17.gif";
В первой строке, мы создали экземпляр объекта Image - переменную pic1. А во второй, присвоили его свойству src нужный URL. При этом немедленно началась загрузка картинки из сети.
Этот код крайне желательно размещать внутри тэга HEAD (между <HEAD> и </HEAD>). В этом случае Вам будет гарантировано, что картинка(и) будет загружена из сети до того, как ее понадобится отбразить в документе.
Рассмотрим такой код:
<HEAD> ... <SCRIPT LANGUAGE="JavaScript"> // Заранее подгрузим две картинки var pic1 = new Image(); pic1.src = "17.gif"; var pic2 = new Image(); pic2.src = "46.gif"; // Анимация сначала выключена var animate=false; function changeImage() { // Если анимация включена - заменим картинку if (animate) { var img = document.images.card1; img.src=(img.src==pic1.src) ? pic2.src:pic1.src; } // Иначе, подождем пол-секунды, вдруг включат? else setTimeout('changeImage()',500); } </SCRIPT> ... </HEAD> <BODY> ... <DIV ALIGN=LEFT> <!-- Картинка будет здесь. --> <IMG NAME="card1" SRC="17.gif" onload="setTimeout('changeImage()',500)"> <P> <FORM> <!-- Включаем и выключаем анимацию по нажатии кнопок. --> <INPUT TYPE=BUTTON VALUE="Start" ONCLICK="animate=true;"> <INPUT TYPE=BUTTON VALUE="Stop" ONCLICK="animate=false;"> </FORM> </DIV> ... </BODY>
Заметьте, если анимация включена, то функция changeImage() не устанавливает свой Timeout. Вместо этого, срабатывает полусекундный Timeout, устанавливаемый по onload. Если же анимация выключена и onload не работает (картинка-же не перезагружается!), то, в этом, случае функция changeImage() ставит полусекундный Timeout, чтобы через пол-секунды проснуться и посмотреть не включили-ли анимацию. Постарайтесь разобраться в этом.
Вот что из всего этого получается.
Теперь, мы, действительно, умеем заменять одну картинку на другую. Возникает вопрос: а как быть, если не нужно изначально размещать никакого изображения на экране? Если нужно, чтобы вначале экран был пуст, а изображение появлялось потом?
Решением здесь может быть, например, такой простой прием.
Заранее подготовим полностью прозрачную картинку (gif файл) того же размера, что и настоящая картинка. Далее, всегда, когда нам не нужна реальная картинка, помещаем на экран эту прозрачную. Поскольку она прозрачна, свозь нее благополучно виден фон и эффек такой, как будто бы никакой картинки на экране и нет вовсе.
Этим же приемом можно воспользоваться и для иммитации движения картинки по экрану. В этом случае, нужно заранее разместить несколько прозрачных изображений и, в нужный момент, подставлять, вместо одного или другого из них, единственное реальное изображение.
В теме DHTML мы познакомимся с более кардинальными методами решения проблемы движения. Пока же ограничимся этим.
Как обычно, элементами массива links являются экземпляры объекта Link, соответствующие всем гиперссыклам имеющимся в документе.
Как мы уже отмечали выше, ссылки реагируют на события MouseOver и MouseOut. Кроме того, они реагируют на Click и ряд других событтий. Свойства объекта Link, в основном связаны с элентами URL такими как, протокол, хост и т.д. Подробнее, Вы можете посмотреть в документации.
Мы здесь очень коротко остановимся лишь на свойстве href. Это свойство содержит адрес на который ссылается данная ссылка. Этот адрес можно поменять из программы. Например:
<SCRIPT LANGUAGE="JavaScript"> function setHref(myLink) { var lnks = ["http://www.botik.ru/", "http://up.botik.ru/", "http://joker.botik.ru/"]; myLink.href = lnks[Math.random()*lnks.length]; } </SCRIPT> <A HREF="" onClick="setHref(this)">Это случайная ссылка</A>
Обратите внимание на использование this в тэге A. Теперь, когда мы знаем, что каждому тэгу соответствует экземпляр объекта, нам нетрудно догадаться к чему относится этот this. Да, действительно, он относится к экземпляру объекта Link, соответствующему данному тэгу A. Точно также можно использовать this и в тэге IMG и в любом другом тэге. Мы еще вернемся к такому использованию this чуть позже в этой лекции.
Экземпляры объекта Form (элементы массива forms) обрабатывают два новых для нас события: submit и reset (обработчики, соответственно, называются onsubmit и onreset).
Эти события происходят при нажатии соотсветсвующих клавиш. Если обработчик одного из этих событий вернет false, то никаких действий, связанных с нажатием клавиш, производится не будет.
Это дает нам удобный инструмент для проверки правильности заполнения форм перед их отправкой на сервер. Все, что нужно сделать, это вызвать функцию проверки в ответ на событие submit и вернуть то, что вернула функция проверки. Та же, в совю очередь, должна вернуть true, если с формой все в порядке и false, если форма заполнена с ошибками. Например:
<SCRIPT LANGUAGE="JavaScript"> // Проверка, заполнено ли поле inp в форме function checkForm(frm) { return frm.inp != ""; } </SCRIPT> <FORM onSubmit="return checkForm(this)"> <INPUT NAME="inp"> <INPUT TYPE=SUBMIT> </FORM>
Опять мы используем this в качестве параметра обработчика события. Вообще, это весьма распространенная практика. В данном случае this находится в тэге FORM и, значит, относится к соответсвующему данной форме экземпляру объекта Form.
Объект Form имеет также два полезных метода: submit() и reset(). Вызов этих методов равносилен нажатию соответсвующих кнопок. Таким образом, вы можете "нажимать" кнопки из программы.
И последнее, что мы скажем здесь об объекте Form - у него есть свойство elements - это массив элементов формы. Этот массив содержит экземпляры объектов - элементов формы, таких как Checkbox, Radio, Text, Textarea.
Объекты, представляющие элементы формы, это объекты Button, Reset, Submit, Password, Text, Textarea, FileUpload, Hidden, Checkbox, Radio, и Select.
Здесь мы рассмотрим их достаточно коротко. Подробно остановимся только на тех, которые требуют нетривиальной обработки.
Во первых, все они иемют свойство form. Это ссылка на ту форму, в которой находится данный элемент.
Первые три - Button, Reset, Submit примерно одинаковы. Они реагируют на события click, focus, blur и некоторые другие (не путайте событие click для кнопки Submit и событие submit для формы! Это разные события). У всех у них есть свойство value - то, что написано на кнопке и метод click(), позволяющий "нажать" кнопку из программы.
Объекты Password, Text, Textarea, FileUpload и Hidden также похожи один на другой. Они реагируют на события focus, blur и др. У всех у них есть свойство value. Значение этого свойства можно устанавливать из программы. Для всех, кроме Hidden, значение value может установить и пользователь. Мы уже имели дело с этими объектами. По крайней мере с Text и Textarea.
Объект Checkbox также довольно прост. По своей природе, элемент checkbox может быть только включен или выключен. Поэтому, объект Checkbox имеет свойство checked, значением которого может быть true или false. Когда пользователь включает/выключает checkbox он, тем самым, изменяет значение этого свойства. Изменить значение свойства checked можно и из программы. При этом чек-бок перерисуется, чтобы правильно отражать свое текущее значение.
Select Radio
Главная страница | Замечания? Комментарии? Идеи? |